<template>
	<view>
		<view>
			<!-- 选择按钮 -->
			<view class="choose-btn">
				<view class="zhaopin" :style="{'border-bottom': keyA == '人找车'?' #1296db 5rpx solid':'#fff'}"
					@click="changeType('人找车')">
					<text>人找车</text>
				</view>
				<view class="qiuzhi" :style="{'border-bottom': keyA == '车找人'?' #1296db 5rpx solid':'#fff'}"
					@click="changeType('车找人')">
					<text>车找人</text>
				</view>
			</view>
			<u-line color="#629eff"></u-line>
			<view v-show=" keyA == '人找车'">
				<view style="display: flex;margin: 20rpx;background-color: white;border-radius: 20rpx;padding: 30rpx;"
					@click="cardClick(item.id)" v-for="(item,index) in list1" :key="index">
					<view style="width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
						<image style="width: 100%;height: 100%;" :src="userAvatar(item.avatar)"></image>
					</view>
					<view style="flex: 1;">
						<view style="height: 80rpx;display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;flex-direction: column;width: 50%;">
								<view style="font-size: 26rpx;">
									{{item.nickname}}
								</view>
								<view style="font-size: 26rpx;color: #909399;">{{item.phoneNum}}</view>
							</view>
							<view style="display: flex;width: 50%;align-items: center;justify-content: flex-end;">
								<view @click.stop="callphone(item.phoneNum)" style="display: flex;">
									<uni-icons type="phone-filled" size="26" color="#20C3FE"></uni-icons>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 10rpx;">
							<text
								style="background-color: #FF226B;font-size: 22rpx;border-radius: 10rpx;line-height: 40rpx;padding: 8rpx;color: #fff;">人找车</text>
						</view>
						<view style="display: flex;font-size: 26rpx;color: #909399;">
							<text>{{item.departureLocation}}</text>
							<u-icon name="rewind-right-fill" color="#20C3FE" size="18"></u-icon>
							<text>{{item.destination}}</text>
						</view>
						<view style="font-size: 26rpx;color: #909399;">
							{{timeFormat(item.setOutTime)}}
						</view>
						<view>
							<text style="font-size: 26rpx;color: #909399;">{{item.remarks}}</text>
						</view>
					</view>
				</view>

			</view>
			<view v-show="keyA=='车找人'">
				<view style="display: flex;margin: 20rpx;background-color: white;border-radius: 20rpx;padding: 30rpx;"
					@click="cardClick(item.id)" v-for="(item,index) in list2" :key="index">
					<view style="width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
						<image style="width: 100%;height: 100%;" :src="userAvatar(item.avatar)"></image>
					</view>
					<view style="flex: 1;">
						<view style="height: 80rpx;display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;flex-direction: column;width: 50%;">
								<view style="font-size: 26rpx;">
									{{item.nickname}}
								</view>
								<view style="font-size: 26rpx;color: #909399;">{{item.phoneNum}}</view>
							</view>
							<view style="display: flex;width: 50%;align-items: center;justify-content: flex-end;">
								<view @click.stop="callphone(item.phoneNum)" style="display: flex;">
									<uni-icons type="phone-filled" size="26" color="#20C3FE"></uni-icons>
								</view>
							</view>
						</view>
						<view style="margin-bottom: 10rpx;">
							<text
								style="background-color: #5AC725;font-size: 22rpx;border-radius: 10rpx;line-height: 40rpx;padding: 8rpx;color: #fff;">车找人</text>
						</view>
						<view style="display: flex;font-size: 26rpx;color: #909399;">
							<text>{{item.departureLocation}}</text>
							<u-icon name="rewind-right-fill" color="#20C3FE" size="18"></u-icon>
							<text>{{item.destination}}</text>
						</view>
						<view style="font-size: 26rpx;color: #909399;">
							{{timeFormat(item.setOutTime)}}
						</view>
						<view>
							<text style="font-size: 26rpx;color: #909399;">{{item.remarks}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCarPoolList
	} from '../../config/api'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				keyA: '人找车',
				carPoolList: [],
				list1:[],
				list2:[]
			}
		},
		onLoad() {
			this.getCarPoolList()
		},
		computed: {
			...mapGetters(['getIsLogin', 'getBaseUrl'])
		},
		methods: {
			changeType(e) {
				if (e == '人找车') {
					this.keyA = '人找车';
				} else {
					this.keyA = '车找人';
				}
			},
			//时间格式
			timeFormat(time) {
				var t = '';
				time = new Date(time).getTime();
				t = new Date(time).toISOString();
				t = t.substr(0, t.lastIndexOf('.'));
				t = t.replace('T', ' ');
				return t;
			},
			// 获取列表
			async getCarPoolList() {
				await getCarPoolList().then(res => {
					this.carPoolList = res.data.data
					this.carPoolList.forEach(item => {
					    if (item.carPoolType == 0) {
							//车找人
					        this.list2.push(item);
					    } else if (item.carPoolType == 1) {
							//人找车
					        this.list1.push(item);
					    }
					});
				})
			},
			// 用戶头像
			userAvatar(pic) {
				if (pic != null && pic != '') {
					return pic.includes('http') ? pic : this.getBaseUrl + pic
				} else {
					return pic
				}
			},
			// 拨打电话
			callphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			// 进入详情
			cardClick(id) {
				console.log("id:", id);
				uni.navigateTo({
					url: `/pages/carPool/carPoolDetail?id=${id}`
				})
			}

		}
	}
</script>

<style scoped lang="scss">

	.choose-btn {
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;

		.zhaopin {
			width: 50%;
		}

		.qiuzhi {
			width: 50%;
		}
	}
</style>